<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { showToast, showLoading, getCurrentInstance, navigateBack } from '@tarojs/taro';
import {
  QUERY_APP_FLOW_PATH_RECORD_DETAIL,
  REJECT_APP_FLOW_PATH_RECORD,
  ACCEPT_APP_FLOW_PATH_RECORD,
} from '/@/api/modules/flow-path/flow-path';

const state = reactive<{
  /**
   * 方签名url地址
   */
  signUrl: string;
  /**
   * 审批意见
   */
  opinion?: string;
  /**
   * uaa用户id
   */
  uaaUserId?: string;
  /**
   * 审批记录
   */
  record?: FlowPathDto.RecordDto;
}>({
  signUrl: '',
  opinion: '',
  uaaUserId: '',
  record: {},
});

/**
 * @description 当前路由信息
 *
 **/
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
};

/**
 @function 上传文件 领用方
 * @param imageUrl
 */
function uploadImageChangeByReceiver(imageUrl: { key: string; src: string } | null) {
  state.signUrl = imageUrl ? imageUrl.src : '';
}

/**
 *同意
 */
function agree() {
  const recordId = checkApproval();
  if (!recordId) {
    showToast({ title: '审批人不是自己不能审批', icon: 'error' });
    return;
  }
  showLoading();
  ACCEPT_APP_FLOW_PATH_RECORD({
    approveDto: { id: recordId, opinion: state.opinion, approverSign: state.signUrl },
  }).then((res) => {
    if (res.comResp?.code === 100) {
      navigateBack();
    }
  });
}

/**
 * 检查审批人是不是自己
 *
 * @param res
 */
function checkApproval(): string | undefined {
  let recordIdList: string[] = [];
  state.record?.approvers?.forEach((item) => {
    if (
      item.reviewStatus === 1 &&
      item.approverUaaUserId != '' &&
      item.approverUaaUserId === state.uaaUserId
    ) {
      console.log('item.id', item.id);
      item.id && recordIdList.push(item.id);
    } else {
      item.recordApproverVSetList?.forEach((subItem) => {
        if (
          subItem.reviewStatus === 1 &&
          subItem.approverUaaUserId != '' &&
          subItem.approverUaaUserId === state.uaaUserId
        ) {
          console.log('subItem.id', subItem.id);
          subItem.id && recordIdList.push(subItem.id);
        }
      });
    }
  });
  return recordIdList.length > 0 ? recordIdList[0] : undefined;
}

/**
 *拒绝
 */
function refuse() {
  const recordId = checkApproval();
  if (!recordId) {
    showToast({ title: '审批人不是自己不能审批', icon: 'error' });
    return;
  }
  showLoading();
  REJECT_APP_FLOW_PATH_RECORD({
    approveDto: { id: recordId, opinion: state.opinion, approverSign: state.signUrl },
  }).then((res) => {
    if (res.comResp?.code === 100) {
      navigateBack();
    }
  });
}

/**
 * @function 获取审批详情
 */
function getDetail() {
  QUERY_APP_FLOW_PATH_RECORD_DETAIL({ id: params.id }).then((res) => {
    state.record = res.flowpathRecordDto;
  });
}

onMounted(() => {
  LOGIN_APP().then((res) => {
    state.uaaUserId = res.sysUserDto.uaaUserId || '';
    getDetail();
  });
});
</script>

<template>
  <view class="my-approve-edit app-page--1">
    <app-navbar title="审批" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="my-approve-edit__wrapper">
        <nut-form>
          <nut-form-item label="审批意见" />
          <nut-form-item>
            <nut-textarea
              v-model="state.opinion"
              placeholder="填写审批意见"
              rows="8"
              limit-show
              text-align="left"
              max-length="200"
            />
          </nut-form-item>
          <nut-form-item label="签字" v-if="state.record?.isSignature === 1">
            <app-upload-signature
              @on-change="uploadImageChangeByReceiver"
              height="80px"
              signPage="/pages/my-approve/sign/index?event=onCanvas"
              event="onCanvas"
              module="approved"
            />
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>
    <view class="my-approve-edit__footer">
      <nut-button class="my-approve-edit__footer-btn" type="info" @click="agree()">同意</nut-button>
      <nut-button class="my-approve-edit__footer-btn" type="danger" @click="refuse()"
        >拒绝</nut-button
      >
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
